<!DOCTYPE html>
<html lang='en'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <h1>axios的使用</h1>

        <h2>发送GET请求</h2>
        <button id="get">点击测试</button>

        <h2>发送GET请求-传参</h2>
        <button id="get-params">点击测试</button>

        <h2>发送POST请求</h2>
        <button id="post">点击测试</button>

        <h2>发送PATCH请求</h2>
        <button id="patch">点击测试</button>

        <h2>发送DELETE请求</h2>
        <button id="delete">点击测试</button>

    </div>

    <script src="node_modules/axios/dist/axios.js"></script>
    <script>
        /* 
            获取 DOM 时 oGet  o  命名规则，一看就是在获取 DOM
        */
        // 获取 DOM 元素
        const oGet = document.querySelector('#get')
        oGetParams = document.querySelector('#get-params')
        oPost = document.querySelector('#post')
        oPatch = document.querySelector('#patch')
        oDelete = document.querySelector('#delete')

        // 注册事件, 这种方式可以给一个元素多个事件，可以移除
        // GET 请求获取
        oGet.addEventListener('click', function () {
            axios({
                method: 'GET', // 请求方式
                url:'http://localhost:3000/todos', // 请求地址
                params: { // GET 查询参数

                },
                data: { // POST 请求体

                }
            }).then(function (res) {
                    // axios 默认给你的是一个响应对象结果，响应对象中的 data 是具体的接口返回数据
                    console.log(res)
                    console.log(res.data)
            })
        })

        // GET 请求传参
        oGetParams.addEventListener('click', function () {

            // 假设来自一个变量，数据 title
            const title = '睡觉'
            axios({
                method: 'GET', // 请求方式
                // url:'http://localhost:3000/todos?title=打豆豆', // 请求地址

                // url:'http://localhost:3000/todos?title='+ title, // 请求地址 // 手动拼字符串，麻烦

                url:'http://localhost:3000/todos', // 请求地址 

                params: { // GET 查询参数

                    title: title

                },
                data: { // POST 请求体

                }
            }).then(function (res) {
                    // axios 默认给你的是一个响应对象结果，响应对象中的 data 是具体的接口返回数据
                    // console.log(res)
                    console.log(res.data)
            })
        })

        // POST 发送请求
        oPost.addEventListener('click', function () {
            const todo = {
                title: 'eee',
                completed: false
            }
            axios ({
                method: 'POST',
                url: 'http://localhost:3000/todos',
                params: {

                },
                // data: {
                //     todos
                // }
                data:todo
            }).then(function (res) {
                console.log(res.data)
            })
        })

        // PATCH 修改请求
        oPatch.addEventListener('click', function () {
            const todo = {
                title: 'ppp'
            }
            const id = 9
            axios ({
                method: 'PATCH',
                url: `http://localhost:3000/todos/${id}`,
                // url: 'http://localhost:3000/todos/' + id,
                // url: 'http://localhost:3000/todos/7',
                data:todo // 提交要修改的数据
            }).then(function (res) {
                console.log(res.data)
            })
        })

        // DELETE 删除请求
        oDelete.addEventListener('click', function () {
            const id = 6
            axios ({
                method: 'DELETE',
                url: `http://localhost:3000/todos/${id}`,
                // url: 'http://localhost:3000/todos/' + id,
                // url: 'http://localhost:3000/todos/7',
            }).then(function (res) {
                console.log(res.data)
            })
        })


        // axios 支持快捷方式
        // axios.request(config)
        // axios.get(url[, config])
        // axios.delete(url[, config])
        // axios.head(url[, config])
        // axios.options(url[, config])
        // axios.post(url[, data[, config]])
        // axios.put(url[, data[, config]])
        // axios.patch(url[, data[, config]])
        
        axios.get('http://localhost:3000/todos').then(res => {
            console.log(res.data)
        })

        axios.get('http://localhost:3000/todos?id=8').then(res => {
            console.log(res.data)
        })

        axios.get('http://localhost:3000/todos/8').then(res => {
            console.log(res.data)
        })

        // 当动态的来自某个数据
        const id = 4
        axios.get('http://localhost:3000/todos', {
            params: {
                // id : id  // ES6 当 key:value 一样时可以简写
                id
            }
        }).then(res =>{
            console.log(res.data)
        })
    </script>
</body>
</html>